<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <myinput
          placeholder="请输入账号/手机号"
          class="input"
          v-model="user.username"
          :rules='/^(\d{5,6})$|^(1[3579]\d{9})$/'
          msg='请输入5-11位数字'
        ></myinput>
        <myinput
          placeholder="密码"
          :rules='/^\S{3,16}$/'
          msg='请输入3-16位的密码'
          class="input"
          type="password"
          v-model="user.password"
        ></myinput>
      </div>
      <p class="tips">
        没有账号？
        <a
          href="#/register"
          class=""
        >去注册</a>
      </p>
      <mybutton
        @click="loginbtn"
        type='succeed'
      >登录</mybutton>
    </div>
  </div>
</template>

<script>
import myinput from "@/components/myinput.vue";
import mybutton from "@/components/mybutton.vue";
import { login } from "@/apis/user.js";
export default {
  data() {
    return {
      user: {
        username: "10086",
        password: "123",
      },
    };
  },
  methods: {
    async loginbtn() {
      if (
        /^(\d{5,6})$|^(1[3579]\d{9})$/.test(this.user.username) &&
        /^\S{3,16}$/.test(this.user.password)
      ) {
        let res = await login(this.user);
        this.$toast(res.data.message);
        if (res.data.message == "用户不存在") {
        } else {
          localStorage.setItem("hm_toutiao", res.data.data.token);
          localStorage.setItem("hm_toutiao_userId", res.data.data.user.id);
          this.$router.push({ path: `/personal/${res.data.data.user.id}` });
        }
      } else {
        this.$toast.fail("用户数据输入不合法");
      }
      // axios
      //   .post("/login", this.user)
      //   .then((data) => {
      //     console.log(data);
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
  },
  components: {
    mybutton,
    myinput,
  },
};
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>